<template>
  <div class="mid">
    <div class="editpart">
      <div style="height: 50px">
        <h1>
          <center>编辑账户</center>
        </h1>
      </div>
      <div class="el-table-div">
        <el-row :gutter="0">
          <el-form
            ref="elForm"
            :model="formData"
            :rules="rules"
            size="medium"
            label-width="100px"
          >
            <el-col :span="12">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="用户名" prop="username">
                    <el-input
                      v-model="formData.username"
                      placeholder="请输入用户名"
                      readonly
                      clearable
                      prefix-icon="el-icon-user"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="密码" prop="password">
                    <el-input
                      v-model="formData.password"
                      placeholder="请输入密码"
                      clearable
                      prefix-icon="el-icon-lock"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="手机号" prop="mobile">
                    <el-input
                      v-model="formData.mobile"
                      placeholder="请输入手机号手机号"
                      :maxlength="11"
                      show-word-limit
                      clearable
                      prefix-icon="el-icon-mobile"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <div class="edit-account-img"></div>
            </el-col>
            <el-col :span="24">
              <el-form-item label="邮箱" prop="email">
                <el-input
                  v-model="formData.email"
                  placeholder="请输入邮箱"
                  clearable
                  prefix-icon="el-icon-message"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="地址" prop="address">
                <el-input
                  v-model="formData.address"
                  placeholder="请输入地址"
                  clearable
                  prefix-icon="el-icon-s-home"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item size="large">
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        username: undefined,
        password: undefined,
        mobile: undefined,
        email: undefined,
        address: undefined,
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号手机号",
            trigger: "blur",
          },
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
          {
            pattern: /^\w+([-+.]\w+)*@\w+([.]\w+)*$/,
            message: "邮箱格式错误",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入地址",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style>
.mid {
  height: 100vh;
  width: 100vw;
}
.editpart {
  width: 1200px;
  height: 600px;
  margin: auto;
  justify-content: center;
  overflow: hidden;
  opacity: 0.9;
  border-radius: 50px;
  animation: loadbac 1s linear;
  transition: 1s ease 0.2s;
  backdrop-filter: blur(5px);
  box-shadow: 0 0 15px rgb(83, 103, 110);
  background: rgba(71, 142, 175, 0.2);
  border-radius: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.el-table-div {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.edit-account-img {
  background-image: url("../assets/editAccountImg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  border-radius: 15px;
  margin-left: 50px;
  margin-top: -20px;
  width: 420px;
  height: 180px;
}
</style>
